<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form :inline="true" class="demo-form-inline" label-position="left" label-width="70px">
                <el-form-item label="月份">
                    <el-date-picker v-model="search.lostMonth" type="monthrange" start-placeholder="开始月份"
                        end-placeholder="结束月份" format="yyyy-MM" value-format="yyyy-MM" style="width: 235px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="地市">
                    <el-select v-model="search.cityName" placeholder="请选择" :disabled="disabled" clearable
                        @change="changeCity">
                        <el-option :label="item.name" :value="item.name" v-for="item, i in cityList"
                            :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区/县">
                    <el-select v-model="search.districtName" placeholder="请选择" clearable filterable>
                        <el-option :label="item.name" :value="item.name" v-for="item, i in county" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运营商">
                    <el-select v-model="search.providerType" placeholder="请选择" clearable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="中国联通" value="中国联通"></el-option>
                        <el-option label="中国电信" value="中国电信"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="丢标原因">
                    <el-select v-model="search.firstCause" placeholder="请选择" clearable>
                        <el-option v-for="item, i in secondList" :key="i" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投标情况">
                    <el-select v-model="search.bidSituation" placeholder="请选择" clearable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="竞标失败" value="竞标失败"></el-option>
                        <el-option label="未参投" value="未参投"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="中标金额">
                    <el-select v-model="search.bidAmountRange" placeholder="请选择" clearable>
                        <el-option label="10到100万元" value="10-100"></el-option>
                        <el-option label="100到500万元" value="100-500"></el-option>
                        <el-option label="500到1000万元" value="500-1000"></el-option>
                        <el-option label="1000万元以上" value="1000以上"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="down">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-button type="primary" @click="handleaddLostLabel">新增</el-button>
        </div>
        <el-table :data="dataList" style="width: 100%;margin-top:12px;" border class="table-box" v-loading="loading"
            :height="height + 'px'">
            <el-table-column align="center" label="月份" width="80px">
                <template slot-scope="scope">
                    {{ scope.row.lostMonth }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="项目标题">
                <template slot-scope="scope">
                    {{ scope.row.projectName }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="地市">
                <template slot-scope="scope">
                    {{ scope.row.cityName }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="区/县">
                <template slot-scope="scope">
                    {{ scope.row.districtName }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="招标人">
                <template slot-scope="scope">
                    {{ scope.row.bidder }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="中标金额(万元)">
                <template slot-scope="scope">
                    {{ scope.row.bidAmount }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="中标运营商">
                <template slot-scope="scope">
                    {{ scope.row.providerType }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="中标企业">
                <template slot-scope="scope">
                    {{ scope.row.bidCompany }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="行业">
                <template slot-scope="scope">
                    {{ getNameText('industryList', scope.row.industryCounty) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="项目归属">
                <template slot-scope="scope">
                    {{ scope.row.projectBelonging }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="一级原因">
                <template slot-scope="scope">
                    {{ getNameText('secondList', scope.row.firstCause) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="140">
                <template slot-scope="scope">
                    <el-button type="text" @click="goDetail(scope)">详情</el-button>
                    <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
            @pagination="getPagination" />
        <!-- <el-dialog :visible.sync="dialogVisible" title="目标认领" :close-on-click-modal="false"
      width="70%">
      <addDialog />
      <div style="text-align:right;">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRole">确定</el-button>
      </div>
    </el-dialog> -->
        <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'edit' ? '编辑' : '新增'" top="2vh" width="1400px"
            :close-on-click-modal="false" class="dialog-box">
            <el-form :model="role" label-width="140px" label-position="top" :rules="rules" ref="ruleForm">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item label="月份" prop="lostMonth">
                            <el-date-picker type="month" v-model="role.lostMonth" placeholder="选择月份" format="yyyy-MM"
                                value-format="yyyy-MM" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="发布链接" prop="publishLink">
                            <el-input v-model="role.publishLink" placeholder="请输入发布链接" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="发布时间" prop="publishTime">
                            <el-date-picker v-model="role.publishTime" type="date" placeholder="选择日期"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="项目标题" prop="projectName">
                            <el-input v-model="role.projectName" placeholder="请输入项目标题" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="地市" prop="cityName">
                            <el-select v-model="role.cityName" placeholder="请选择" :disabled="disabled" clearable
                                @change="changeCityDialog">
                                <el-option :label="item.name" :value="item.name" v-for="item, i in cityList"
                                    :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="区/县" prop="districtName">
                            <el-select v-model="role.districtName" placeholder="请选择" clearable filterable>
                                <el-option :label="item.name" :value="item.name" v-for="item, i in county"
                                    :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="招标人" prop="bidder">
                            <el-input v-model="role.bidder" placeholder="请输入招标人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="中标金额(万元)" prop="bidAmount">
                            <el-input-number v-model="role.bidAmount" controls-position="right" placeholder="请输入中标金额"
                                :min="0" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="中标运营商" prop="providerType">
                            <el-select v-model="role.providerType" placeholder="请选择" clearable>
                                <el-option label="中国联通" value="中国联通"></el-option>
                                <el-option label="中国电信" value="中国电信"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="中标企业" prop="bidCompany">
                            <el-input v-model="role.bidCompany" placeholder="请输入中标企业" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="行业" prop="industryCounty">
                            <el-select v-model="role.industryCounty" placeholder="请选择" clearable filterable>
                                <el-option :label="item.name" :value="item.code" v-for="item, i in industryList"
                                    :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="丢标编码">
                            <el-input v-model="role.missCode" placeholder="请输入丢标编码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="项目归属" prop="projectBelonging">
                            <el-input v-model="role.projectBelonging" placeholder="请输入项目归属" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="商机录入系统日期">
                            <el-date-picker v-model="role.entryDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="全网商机编码">
                            <el-input v-model="role.busiOpportunityNumber" placeholder="请输入全网商机编码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="投标情况" prop="bidSituation">
                            <el-select v-model="role.bidSituation" placeholder="请选择投标情况" clearable>
                                <el-option label="竞标失败" value="竞标失败"> </el-option>
                                <el-option label="未参投" value="未参投"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="是否中标友商前期存量项目" prop="stockFlag">
                            <el-select v-model="role.stockFlag" placeholder="请选择是否中标友商前期存量项目" clearable>
                                <el-option label="是" value="是"> </el-option>
                                <el-option label="否" value="否"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="涉及标准产品">
                            <el-input v-model="role.relatedProduct" placeholder="请输入涉及标准产品" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="涉及解决方案">
                            <el-input v-model="role.relatedProposal" placeholder="请输入涉及解决方案" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="height: 79px;"></el-col>
                    <el-col :span="5">
                        <el-form-item label="移动内部专业公司支撑">
                            <el-select v-model="role.professionalCompany" placeholder="请选择" clearable>
                                <el-option :label="item.name" :value="item.code" v-for="item, i in professionalCompany"
                                    :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" style="width: 80%;">
                        <el-form-item label="专业公司未支撑原因">
                            <el-input v-model="role.unsupportedCause" placeholder="请输入专业公司未支撑原因" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="专业公司支撑是否有不足">
                            <el-select v-model="role.lackFlag" placeholder="请选择专业公司支撑是否有不足" clearable>
                                <el-option label="是" value="是"> </el-option>
                                <el-option label="否" value="否"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" style="width: 80%;">
                        <el-form-item label="对专业公司的意见点">
                            <el-input v-model="role.suggestionName" placeholder="请输入对专业公司的意见点" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="前期走访及其它动作">
                            <el-input v-model="role.actionProgress" placeholder="请输入前期走访及其它动作" type="textarea"
                                :autosize="{ minRows: 1, maxRows: 4 }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="标书得分对标分析">
                            <el-input v-model="role.scoreAnalysis" placeholder="请输入标书得分对标分析" type="textarea"
                                :autosize="{ minRows: 1, maxRows: 4 }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="丢标原因说明" prop="missExplanation">
                            <el-input v-model="role.missExplanation" placeholder="请输入丢标原因说明" type="textarea"
                                :autosize="{ minRows: 1, maxRows: 4 }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="一级原因" prop="firstCause">
                            <el-select v-model="role.firstCause" placeholder="请选择一级原因" clearable
                                @change="changeFirstCase">
                                <el-option v-for="item, i in secondList" :key="i" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="二级原因" prop="secondCause">
                            <el-select v-model="role.secondCause" placeholder="请选择二级原因" clearable>
                                <el-option v-for="item, i in secondCase" :key="i" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="width: 60%;">
                        <el-form-item label="备注说明">
                            <el-input v-model="role.addRemark" placeholder="请输入备注说明" type="textarea"
                                :autosize="{ minRows: 1, maxRows: 4 }" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="text-align:right;">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRole">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import path from 'path'
import { selectByLostLabel, addLostLabel, deleteLostLabel, updateLostLabel } from '@/api/api'
import Pagination from '@/components/Pagination'
import addDialog from './components/addDialog.vue'
import qs from 'querystring'
import moment from 'moment'
let query;
const defaultRole = {
    deptvalue: []
}

export default {
    name: 'work',
    components: { Pagination, addDialog },
    data() {
        return {
            professionalCompany: [],
            industryList: [],
            disabled: true,
            secondCase: [],
            secondList: [],
            cityList: [{
                "name": "省战客",
                "code": "1",
            }, ...cityList],
            county: [],
            typeOptions: [
                { label: '进行中' },
                { label: '已完成' }
            ],
            ksList: orgList,
            cityName: localStorage.getItem('cityName'),
            rules: {
                lostMonth: [
                    { required: true, message: '请选择提出时间', trigger: 'change' }
                ],
                publishLink: [
                    { required: true, message: '请输入发布链接', trigger: 'change' }
                ],
                publishTime: [
                    { required: true, message: '请选择发布时间', trigger: 'change' }
                ],
                projectName: [
                    { required: true, message: '请输入项目标题', trigger: 'change' }
                ],
                cityName: [
                    { required: true, message: '请选择地市', trigger: 'change' }
                ],
                districtName: [
                    { required: true, message: '请选择区/县', trigger: 'change' }
                ],
                bidder: [
                    { required: true, message: '请输入招标人', trigger: 'change' }
                ],
                bidAmount: [
                    { required: true, message: '请输入中标金额', trigger: 'change' }
                ],
                providerType: [
                    { required: true, message: '请输入中标运营商', trigger: 'change' }
                ],
                bidCompany: [
                    { required: true, message: '请输入中标企业', trigger: 'change' }
                ],
                industryCounty: [
                    { required: true, message: '请输入行业', trigger: 'change' }
                ],
                projectBelonging: [
                    { required: true, message: '请输入项目归属', trigger: 'change' }
                ],
                bidSituation: [
                    { required: true, message: '请选择投标情况', trigger: 'change' }
                ],
                stockFlag: [
                    { required: true, message: '请选择是否中标友商前期存量项目', trigger: 'change' }
                ],
                missExplanation: [
                    { required: true, message: '请输入丢标原因说明', trigger: 'change' }
                ],
                firstCause: [
                    { required: true, message: '请选择一级原因', trigger: 'change' }
                ],
                secondCause: [
                    { required: true, message: '请选择二级原因', trigger: 'change' }
                ],
            },
            loading: false,
            height: 400,
            changetypeOptions: [
                {
                    value: 0,
                    label: '待开始'
                },
                {
                    value: 1,
                    label: '进行中'
                },
            ],
            options: [],
            total: 0,
            completedCount: 0,
            uncompletedCount: 0,
            role: Object.assign({}, defaultRole),
            routes: [],
            dataList: [],
            dialogVisible: false,
            dialogType: 'new',
            checkStrictly: false,
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            search: { providerType: '', bidSituation: '' },
            pfOptions: [],
            zxOptions: [],
            pagination: {
                'pageNum': 1,
                'pageSize': 20
            },
            time: null,
        }
    },
    watch: {
        dialogVisible(val) {
            if (!val) {
                this.role = { deptvalue: [] }
                this.county = []
                this.options = []
                this.$refs['ruleForm'].resetFields();
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            if (to.path == '/work/list') {
                vm.onSubmit();
            }
        });
    },
    computed: {
        routesData() {
            return this.routes
        }
    },
    created() {
        selectByLostLabel({dataType:'causeTree'}).then(res=>{
            this.secondList = res || []
        })
         selectByLostLabel({dataType:'industries'}).then(res=>{
            this.industryList = res || []
        })
        selectByLostLabel({dataType:'professionalCompanies'}).then(res=>{
            this.professionalCompany = res || []
        })
        this.disabled = localStorage.getItem('cityName').replace('市', '') !== '黑龙江省'
        query = this.$route.query;
        this.search = { cityName: this.cityName == '黑龙江省' ? '' : this.cityName, ...query,  providerType: '', bidSituation: '' };
        this.getTasks();
        this.height = this.getHeight();
        let that = this;
        window.onresize = function (event) {
            that.height = that.getHeight();
        };
    },
    methods: {
        down() {
            let params = {
                ...this.search,
                lostBeginMonth: this.search.lostMonth && this.search.lostMonth.length ? this.search.lostMonth[0] + '-01' : '',
                lostEndMonth: this.search.lostMonth && this.search.lostMonth.length ? moment(this.search.lostMonth[1]).endOf('month').format('YYYY-MM-DD') : '',
            }
            delete params.lostMonth
            window.open(`${process.env.NODE_ENV === 'development' ? '/dev-api' : ''}/api/lostLabel/exportByLostLabel?${qs.stringify(params)}`)
        },
        getNameText(typeName, code) {
            let find = this[typeName].find(item => item.code == code || item.value == code)
            return find && (find.name || find.label) ? find.name || find.label : ''
        },
        goDetail(scope) {
            let query = {
                ...scope.row,
                industryCounty: this.getNameText('industryList', scope.row.industryCounty),
                professionalCompany: this.getNameText('professionalCompany', scope.row.professionalCompany),
            }
            this.$router.push({
                path: `/weeklyReport/loseBidDetail/${scope.row.lostId}`,
                query: { ...query }
            })
        },
        changeFirstCase(val, secondCause) {
            this.role = { ...this.role, secondCause: secondCause || '' }
            let list = this.secondList.find(item => item.value === val)?.children || []
            this.secondCase = list
        },
        changeCity(val) {
            this.search = { ...this.search, districtName: '' }
            let county = this.cityList.find(item => item.name === val)?.districts || []
            this.county = [{
                "name": "市本级",
                "code": "1",
            }, ...county]
        },
        changeCityDialog(val, districtName) {
            this.role = { ...this.role, districtName: districtName || '' }
            let county = this.cityList.find(item => item.name === val)?.districts || []
            this.county = [{
                "name": "市本级",
                "code": "1",
            }, ...county]
        },
        getHeight() {
            let winHieght = window.innerHeight;
            return winHieght - 295;
        },
        getStateName(state) {
            let find = this.typeOptions.find(item => item.value == state)
            return find?.label || state || ''
        },
        onSubmit() {
            this.pagination = {
                "pageNum": 1,
                "pageSize": 20
            }
            this.getTasks()
        },
        reset() {
            this.search = { cityName: this.cityName == '黑龙江省' ? '' : this.cityName, ...query,  providerType: '', bidSituation: '' };
            this.county = []
            this.onSubmit()
        },
        getPagination(pagination) {
            this.pagination = pagination
            this.getTasks()
        },
        truncateToFixed(value, decimals) {
            const integerPart = Math.trunc(value || 0); // 获取整数部分
            const decimalPart = value - integerPart; // 获取小数部分
            const factor = Math.pow(10, decimals);
            const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
        },
        async getTasks() {
            try {
                this.loading = true
                let params = {
                    page: this.pagination.pageNum,
                    size: this.pagination.pageSize,
                    ...this.search,
                    lostBeginMonth: this.search.lostMonth && this.search.lostMonth.length ? this.search.lostMonth[0] + '-01' : '',
                    lostEndMonth: this.search.lostMonth && this.search.lostMonth.length ? moment(this.search.lostMonth[1]).endOf('month').format('YYYY-MM-DD') : '',
                }
                delete params.lostMonth
                const res = await selectByLostLabel(params);
                this.total = res.total || 0;
                this.dataList = res?.list || [];
                this.loading = false
            } catch (error) {
                this.loading = false
            }
        },
        generateRoutes(routes, basePath = '/') {
            const res = []

            for (let route of routes) {
                if (route.hidden) { continue }

                const onlyOneShowingChild = this.onlyOneShowingChild(route.children, route)

                if (route.children && onlyOneShowingChild && !route.alwaysShow) {
                    route = onlyOneShowingChild
                }

                const data = {
                    path: path.resolve(basePath, route.path),
                    title: route.meta && route.meta.title

                }
                if (route.children) {
                    data.children = this.generateRoutes(route.children, data.path)
                }
                res.push(data)
            }
            return res
        },
        generateArr(routes) {
            let data = []
            routes.forEach(route => {
                data.push(route)
                if (route.children) {
                    const temp = this.generateArr(route.children)
                    if (temp.length > 0) {
                        data = [...data, ...temp]
                    }
                }
            })
            return data
        },
        handleaddLostLabel() {
            this.role = Object.assign({}, defaultRole)
            if (this.$refs.tree) {
                this.$refs.tree.setCheckedNodes([])
            }
            this.dialogType = 'new'
            this.dialogVisible = true
        },
        async handleEdit(scope) {
            await this.getEdit(scope)
        },
        getEdit(scope) {
            this.dialogType = 'edit'
            this.dialogVisible = true
            this.checkStrictly = true
            this.role = { ...scope.row }
            this.changeCityDialog(scope.row.cityName, scope.row.districtName)
            this.changeFirstCase(scope.row.firstCause, scope.row.secondCause)
            this.$nextTick(() => {
                const routes = this.generateRoutes(this.role.routes)
                this.$refs.tree.setCheckedNodes(this.generateArr(routes))
                this.checkStrictly = false
            })
        },
        handleDelete({ $index, row }) {
            this.$confirm('确认删除当前丢标台账?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    deleteLostLabel(row.lostId).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            })
                            this.getTasks();
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.message
                            })
                            this.getTasks();
                        }
                    })
                })
                .catch(err => { console.error(err) })
        },
        confirmRole() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    const isEdit = this.dialogType === 'edit'
                    if (isEdit) {
                        updateLostLabel({ ...this.role }).then(res => {
                            this.dialogVisible = false
                            this.getTasks()
                            this.options = []
                        })
                    } else {
                        addLostLabel({ ...this.role }).then(res => {
                            this.dialogVisible = false
                            this.getTasks()
                            this.options = []
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        onlyOneShowingChild(children = [], parent) {
            let onlyOneChild = null
            const showingChildren = children.filter(item => !item.hidden)
            if (showingChildren.length === 1) {
                onlyOneChild = showingChildren[0]
                onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
                return onlyOneChild
            }
            if (showingChildren.length === 0) {
                onlyOneChild = { ...parent, path: '', noShowingChildren: true }
                return onlyOneChild
            }

            return false
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    overflow-y: auto;
    height: calc(100vh - 86px);
    padding: 16px 20px 0;

    .roles-table {
        margin-top: 30px;
    }

    .permission-tree {
        margin-bottom: 30px;
    }
}


.filter-container {
    padding-bottom: 0px;

    ::v-deep .el-form-item {
        margin-bottom: 10px;
    }
}

::v-deep .el-select,
::v-deep .el-date-editor.el-input,
::v-deep .el-date-editor.el-input__inner {
    width: 100%;
}

.table-box {
    ::v-deep .el-button--medium {
        padding: 0px;
    }
}

.popover-list {
    min-height: 30px;
    line-height: 30px;
    cursor: pointer;
    padding: 0 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    &:hover {
        background: #f3f6fb;
    }
}

.all-num-box {
    margin-left: 20px;

    .green {
        color: #1ecd00;
        margin: 0 2px;
    }

    .blue {
        color: #1890ff;
        margin: 0 2px;
    }
}

::v-deep .el-form-item {
    position: relative;
}


.dialog-box {

    // ::v-deep .el-form-item--medium .el-form-item__label {
    //     line-height: 16px;
    //     position: absolute;
    //     top: 50%;
    //     transform: translateY(-50%);
    // }
    ::v-deep .el-form--label-top .el-form-item__label {
        padding: 0;
    }

    ::v-deep .el-form-item--medium .el-form-item__label {
        line-height: 28px;
    }

    ::v-deep .el-dialog__body {
        padding: 10px 20px;
    }

    ::v-deep .el-form-item {
        margin-bottom: 14px;
    }

    ::v-deep .el-col-5 {
        width: 20%;
    }
}

::v-deep .el-input-number--medium {
    width: 100%;
}

::v-deep .el-input-number.is-controls-right .el-input__inner {
    text-align: left;
}

.pagination-container {
    padding-top: 0;
}
</style>
<style>
.popper-list {
    padding: 0;
}

.popperClass {
    width: 500px;
}
</style>